import React from 'react';
import {Card, Table} from "antd";
import TableToolbar from "common/table/TableToolbar";

import {useAppDispatch, useAppSelector} from "hooks/redux-hook";

import reimburseColumns from "columns/ReimburseColumns";

import LogFactory from 'log/LogFactory';
import {fetchPageData} from "../../../redux/reducer/async/reimburseAsyncAction";
import {ReduxStatus} from "enum/ReduxStatus";

const log = LogFactory.getLog("ReimburseListComponent") ;
const ReimburseListComponent = () => {

    const state = useAppSelector(state => state.reimburse) ;
    const dispatch = useAppDispatch() ;

    const refreshPage = () => {
        dispatch(fetchPageData({current: 1, pageSize: state.pageSize})) ;
    } ;

    if (state.status === ReduxStatus.INIT){
        dispatch(fetchPageData({current: state.current, pageSize: state.pageSize})) ;
    }

    if (state.status === ReduxStatus.REFRESH){
        dispatch(fetchPageData({current: state.current, pageSize: state.pageSize})) ;
    }

    const pageOnChange = (page: number, pageSize: number) => {
        dispatch(fetchPageData({current: page, pageSize: pageSize})) ;
    } ;

    return (
        <Card
            title="Reimburse List"
            extra={"extra"}
        >
            <TableToolbar titleContent={state.total} refresh={refreshPage}/>
            <Table
                loading={state.loading}
                dataSource={state.data}
                columns={reimburseColumns}
                pagination={{
                    total: state.total,
                    current: state.current,
                    pageSize: state.pageSize,
                    onChange: pageOnChange
                }}
            />
        </Card>
    );
};

export default ReimburseListComponent;